﻿
@{
    ViewData["Title"] = "字体预览";
}

<h2>字体预览</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
    <div class="row">
        <form>
            <div class="form-group">
                <label for="select_font">选择字体</label>
                <select class="form-control" id="select_font" name="font"></select>
            </div>
            <div class="form-group">
                <label for="select_font">字号</label>
                <select class="form-control" id="select_fontsize" name="fontsize">
                    @*<option value="12">12</option>
                    <option value="14">14</option>
                    <option value="16">16</option>
                    <option value="18">18</option>
                    <option value="24">24</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                    <option value="60">60</option>
                    <option value="70">70</option>
                    <option value="80">80</option>
                    <option value="90">90</option>*@
                    <option value="100" selected>100</option>
                </select>
            </div>
            <div class="form-group">
                <label for="text_review">预览内容</label>
                <textarea class="form-control" id="text_review" name="body" rows="3" placeholder="输入要预览的内容"></textarea>
            </div>
            <div class="form-group" id="div_review" style="display:none;">
                <label for="select_font">预览</label>
                <div>
                    <img class="img-thumbnail" src="" id="img_review" />
                </div>

            </div>
            <button type="button" class="btn btn-primary mb-2" id="btn_submit">提交</button>
        </form>
    </div>
</div>
@section Scripts{ 
    <script>
        $(function () {
            $.ajax({
                url: '/api/Fonts/Font/List',
                type: 'post',
                dataType: 'json',
                data: {},
                success: function (result) {
                    var $option = '<option value="">---请选择字体---</option>';
                    $.each(result, function (key, val) {
                        $option += '<option value="' + key + '">' + val + '</option>';
                    });
                    //console.log($option);
                    $('#select_font').html($option);
                }
            });

            //预览
            $('#btn_submit').click(function () {
                $.ajax({
                    url: '/api/Fonts/Font/Print',
                    type: 'post',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(GetJsonData()),
                    success: function (result) {
                        if (result.status) {
                            $('#img_review').attr('src', result.data);
                            $('#div_review').show();
                        }
                        else {
                            $('#div_review').hide();
                            alert(result.message);
                        }
                        
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //alert(XMLHttpRequest.responseText);
                        var err = '异常信息:';
                        var error = JSON.parse(XMLHttpRequest.responseText);
                        $.each(error, function (key, val) {
                            err += val+';';
                        });
                        alert(err);
                    }
                });
            });
        });

        function GetJsonData() {
            var json = {
                "font": $('#select_font').val(),
                "fontsize": $('#select_fontsize').val(),
                "body": $("#text_review").val()
            };
            return json;
        }
    </script>
}